<template>
  <div class="activity-list-container">
    <h1>活动打卡列表</h1>
    <div class="table-container">

      <a-table :dataSource="approvedActivities" :columns="columns">
		  <template #dakaStatus="{ record }">
		    {{ record.dakaStatus == 1 ? '已打卡' : '未打卡'}}
		  </template>
        <template #action="{ record }">
          <a-button type="link" @click="kaishidaka(record.activityId)" v-if="record.reviewStatus == 'approved'">开始打卡</a-button>
		  <a-button type="link" @click="jieshudaka(record.activityId)" v-if="record.reviewStatus == 'approved'">结束打卡</a-button>
		  <a-button type="link" v-if="record.reviewStatus != 'approved'" style="color: red;">活动已结束</a-button>
        </template>
      </a-table>
    </div>
<!--    <a-button class="back-button" type="default" @click="goBack">返回主页</a-button>-->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from '../api/request.ts';
import { Table as aTable, Modal as aModal, Button as aButton, message } from 'ant-design-vue';
import { useUserStore } from '../stores/user.ts';
import router from '@/router';

const approvedActivities = ref([]);
const userStore = useUserStore();

const columns = [
  { title: '活动名称', dataIndex: 'activityName', key: 'activityName' },
  { title: '打卡状态', key: 'dakaStatus' ,
	slots: { customRender: 'dakaStatus' }
  },
  { title: '开始打卡时间', dataIndex: 'startTime', key: 'startTime' },
  { title: '结束打卡时间', dataIndex: 'endTime', key: 'endTime' },
  { title: '学时', dataIndex: 'timeLength', key: 'timeLength' },
  {
    title: '操作',
    key: 'action',
    slots: { customRender: 'action' },
  },
];

const fetchActivities = async () => {
  try {
    const response = await axios.get('/activities/dakaList/'+ userStore.userId);
    approvedActivities.value = response.data;
    // 只保留审核状态为 "approved" 的活动
  } catch (error) {
    console.error('Error fetching activities/shengqing:', error);
  }
};

const kaishidaka = async (id) => {
  try {
    await axios.post(`/activities/daka/${id}/${userStore.userId}`);
	message.success('打卡成功');
	fetchActivities();
  } catch (error) {
    console.error('Error joining activity:', error);
	message.error('打卡失败');
  }
};
const jieshudaka = async (id) => {
  try {
    await axios.post(`/activities/jieshudaka/${id}/${userStore.userId}`);
	message.success('打卡成功');
	fetchActivities();
  } catch (error) {
    console.error('Error joining activity:', error);
	message.error('打卡失败');
  }
};

// const goBack = () => {
//   router.push('/home');
// };

fetchActivities();
</script>
<style>
.header {
  display: flex;
  justify-content: flex-end;;
  align-items: center;
  padding: 16px;
  background-color: #f0f2f5;
  border-bottom: 1px solid #dcdcdc;
}
</style>

<!--<style scoped>-->
<!--/* 外层容器，用于包裹整个活动列表页面，使内容居中 */-->
<!--.activity-list-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;  /* 使内容垂直排列 */-->
<!--  align-items: center;     /* 水平居中 */-->
<!--  padding: 20px;           /* 容器内填充 */-->
<!--  background-color: #f0f2f5; /* 背景颜色 */-->
<!--}-->

<!--/* 表格容器，限制表格宽度并使其居中 */-->
<!--.table-container {-->
<!--  width: 100%;-->
<!--  max-width: 800px;        /* 最大宽度 */-->
<!--  background-color: white; /* 表格背景色 */-->
<!--  padding: 20px;           /* 表格容器内填充 */-->
<!--  border-radius: 8px;      /* 圆角 */-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */-->
<!--}-->

<!--/* 返回主页按钮，居中显示 */-->
<!--.back-button {-->
<!--  margin-top: 20px;        /* 按钮顶部间距 */-->
<!--}-->

<!--.logo {-->
<!--  width: 100px;             /* 设置logo图片的宽度 */-->
<!--  margin-bottom: 20px;      /* 图片下方的间距 */-->
<!--}-->
<!--</style>-->
